Spot Cinema Movie App
Ben Kaynor
Objective:
The objective of this project was to design a three-page mobile app for Spot Cinema, a fictional movie theatre. The app needed to include: a Discover page, an Individual Movie page, and a Purchase Tickets page. This project aims to introduce the processes of interaction design, including analyzing the existing industry and designing apps using Figma.
Mood Boards and Inspiration:
This mood board compiles images I used for inspiration during the app's development. I particularly enjoyed the colors, layout, and element design of these examples. Overall, I felt attracted to sleek layouts that focused on a cohesive color theme. Darker backgrounds with lighter text also felt more pleasing to me, especially when dealing with lots of visual information at once.
Sketches:
These monochrome sketches were created to plan out the features of the app, as well as set a basic visual theme (shapes, design elements, etc.). I ultimately borrowed from all 3 designs, while integrating new elements. They each highlight a Discover page, an Individual Movie page, and a Purchase Tickets page. I took inspiration in the layout from the AMC, Fandango, and Regal movie apps, as well as the movie review platform Letterboxd and the App Store. Each property made decisions that worked/didn't work well with my vision of the app, and I found this phase of the design process critical in deciding how to proceed into Figma.
Style Guide:
All of the text in the app is set in the typeface Avenir Next in a variety of weights. By varying color and weight, I created text hierarchy for a smooth reading experience. Five colors were primarily used for the app's primary design, with additional colors used where necessary (Ex: movie posters, logos of other companies, accessibility icons, etc.)
Embedded is the Figma file containing my app.
User Interface:
The status bar of the phone, navigation bar at the top of the app, and tool bar at the bottom of the app remain fixed as the user scrolls through the app (though individual aspects may update). The "return" arrow on the left of the navigation bar (top left of the screen) will return the user to the previous page, with the exception of the Discover page, as it functions as the "home" page of the app. The menu icon on the right of the navigation bar (top right of the screen) would display a menu with settings tailored to each specific page, as well as settings affecting the overall app. Each icon of the tool bar can also be used to instantly navigate to the intended page: the Discover tab navigates to the main discover page, the Search tab would navigate to a search bar for specific movies/theaters, the Tickets tab would allow users to view tickets they have purchased, and the MySpot page would let users access/edit their profile on the app.
Discover Page:
This page is the "home" page of the app. It provides users with a display of movies of different genres for them to browse. The default tab is New Releases, which showcases movies that have recently arrived to theaters. At the top of this tab is the Featured section, highlighting popular movies. The movies displayed in each genre, as well as the featured section, may be scrolled through. Users may also select the Coming Soon tab, which displays upcoming movies and their release dates.
The Discover page in action.
Individual Movie Page:
This page is displayed once the user selects an individual movie (in this case, Onward). The user may view the movie's poster, length, rating, genre, tagline, and a short description of the plot. By clicking the trailer, they can access a closer view with a button to view the movie's trailer. Beneath this information are three buttons that allow the user to watch the movie's trailer, add the film to their own personal watchlist, and order tickets to said film respectively. The trailer buttons link to the official trailer on YouTube. They may also rate/review the film, and scroll through the ratings/reviews of other users below (reviews from the external sites IMDb and Rotten Tomatoes can also be selected via a filtering option). At the bottom of the page, users can scroll through the film's cast and crew, and may select individuals to see their other works.
The Individual Movie page in action.
Purchase Tickets Page:
If the user selects the Order Tickets button on the Individual Movie page, they are directed to the Purchase Tickets page. Special information regarding theater statuses (such as mass closings) is displayed at the top. Users can select the date they wish to see the film, and scroll through multiple theaters to view times the movie is being shown/formats it can be seen in (Standard, 3D, IMAX, etc.). The first theater shown will be the user's preferred theater based on location, indicated by the red icon on the right. Once a time has been selected, a submenu opens which allows users to select how many tickets they want to purchase. There are three options for tickets: General, Child, and Senior. The price of the selected tickets is shown before the purchase is made. Additionally, the Choose Seating button lets users view the theater's seating plan and reserve seats for their tickets based on availability.
The Purchase Tickets page in action.
Learning Outcomes:
This project was my first experience designing layouts digitally, and I learned a lot about the principles of hierarchy and spacing while working on the app. Things that look clear on a computer screen don't always translate well to the smaller size of a phone screen. Size and weight were critical in designing an interface that can be read clearly and simply. I greatly enjoyed the Figma app, it was very accessible and provided an impressive wealth of features!
